<template>
  <status-bar barBackgroundColor="#24adf3" />
  <view class="profile-page">
    <view class="profile-page__headPortrait-part f ai-c">
      <van-image
        round
        :src="avatarSrc"
        width="100rpx"
        height="100rpx"
        class="profile-page__headPortrait-part_image"
        fit="cover"
      />
      <text class="profile-page__headPortrait-part_text fs-40">{{
        userName
      }}</text>
    </view>
    <view class="profile-page__main-part">
      <view class="profile-page__main-part_management f ai-c jc-sb">
        <view class="f fd-col ai-c" @click="userInfoEdit">
          <image
            src="/static/image/profile/phone.png"
            mode="widthFix"
            class="img"
          ></image>
          <text>我的信息管理</text>
        </view>
        <view class="f fd-col ai-c" @click="managementViewClick('address')">
          <image
            src="/static/image/profile/address.png"
            mode="widthFix"
            class="img"
          ></image>
          <text>地址管理</text>
        </view>
        <view class="f fd-col ai-c" @click="managementViewClick('order')">
          <image
            src="/static/image/profile/order.png"
            mode="widthFix"
            class="img"
          ></image>
          <text>订单管理</text>
        </view>
      </view>
      <view>
        <uni-list>
          <uni-list-item
            v-for="item of listData"
            :key="item.title"
            :title="item.title"
            :extra-icon="item.extraIcon"
            :to="item.url"
            :show-extra-icon="true"
            :showArrow="true"
            link="navigateTo"
          ></uni-list-item>
        </uni-list>
      </view>
      <view class="profile-page__main-part_footer f jc-c">
        <van-button type="danger" @click="logOut" size="large" round
          >退出登录</van-button
        >
      </view>
    </view>
  </view>
  <uni-popup ref="popup" type="dialog">
    <uni-popup-dialog
      type="warn"
      mode="base"
      content="确定要退出登录吗"
      :before-close="true"
      @close="close"
      @confirm="confirm"
    ></uni-popup-dialog>
  </uni-popup>
</template>

<script>
import storageOperation from "/utils/index";
import profileAPI from "/api/modules/profile";
export default {
  name: "profile-page",
  data() {
    return {
      userName: "",
      userPhone: "",
      userPwd: "",
      avatarSrc: "",
      listData: [
        {
          extraIcon: {
            color: "#4cd964",
            size: "22",
            type: "gear",
          },
          title: "收货偏好设置",
          url: "/pages/profile/setting/setting",
        },
        {
          extraIcon: {
            color: "#4cd964",
            size: "22",
            type: "compose",
          },
          title: "驿站设置",
          url: "/pages/profile/stageSetting/stage-setting",
        },
        {
          extraIcon: {
            color: "#4cd964",
            size: "22",
            type: "email",
          },
          title: "查看寄件",
          url: "/pages/mail/sent-off-check",
        },
        {
          extraIcon: {
            color: "#4cd964",
            size: "22",
            type: "chat",
          },
          title: "意见反馈",
          url: "/pages/profile/feedback/feedback",
        },
        {
          extraIcon: {
            color: "#4cd964",
            size: "22",
            type: "list",
          },
          title: "使用条款",
          url: "/pages/profile/clause/clause",
        },
      ],
    };
  },
  onShow() {
    this.userName = storageOperation.getStorageSync("userName").value;
    this.userPhone = storageOperation.getStorageSync("userPhone").value;
    this.userPwd = storageOperation.getStorageSync("userPwd").value;
    // 获取头像
    const params = {
      userName: this.userName,
      userPhone: this.userPhone,
    };
    profileAPI
      .getAvatar(params)
      .then((res) => {
        this.avatarSrc = "data:image/png;base64," + res;
      })
      .catch((err) => {
        this.avatarSrc = "/static/image/profile/image_loading_error.png";
        uni.showToast({
          title: "用户头像加载失败",
          duration: 1000,
          icon: "none",
          position: "top",
        });
        console.log(err);
      });
  },
  methods: {
    userInfoEdit() {
      uni.navigateTo({
        url: `/pages/profile/userInfoEdit/web-view?userName=${this.userName}&userPhone=${this.userPhone}&userPwd=${this.userPwd}`,
      });
    },
    managementViewClick(type) {
      const baseUrl = "/pages/profile";
      uni.navigateTo({
        url: `${baseUrl}/${type}Management/${type}-management`,
      });
    },
    logOut() {
      console.log("logOut");
      this.$refs.popup.open();
    },
    close() {
      this.$refs.popup.close();
    },
    confirm() {
      this.$refs.popup.close();
      storageOperation.removeStorage("loginStatus");
      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.profile-page {
  position: fixed;
  width: 100%;
  height: 100vh;
  &__headPortrait-part {
    padding: 40rpx 40rpx;
    width: 100%;
    height: 200rpx;
    background: #24adf3;
    &_image {
      margin-right: 30rpx;
      will-change: transform;
    }
    &_text {
      color: $uni-text-color-inverse;
    }
  }
  &__main-part {
    position: absolute;
    top: 232rpx;
    width: 100%;
    height: calc(100vh - 232rpx);
    background: #fff;
    border-radius: 40rpx 40rpx 0 0;
    &_management {
      padding: 40rpx 40rpx;
      .img {
        width: 80rpx;
        margin-bottom: 10rpx;
      }
    }
    &_footer {
      margin-top: 200rpx;
      width: 100%;
      ::v-deep .van-button {
        width: 50%;
        font-size: 40rpx;
      }
    }
  }
}
</style>
